<template>
  <view class="container">
    <!-- 商品轮播图 -->
    <swiper
      class="swiper"
      :indicator-dots="true"
      :autoplay="true"
      :interval="3000"
      :duration="1000"
    >
      <swiper-item v-for="(image, index) in productImages" :key="index">
        <image :src="image" mode="aspectFill" class="swiper-image" @click="previewImage(index)" />
      </swiper-item>
    </swiper>

    <!-- 商品信息 -->
    <view class="product-info">
      <view class="price-section">
        <text class="current-price">¥{{ product.price }}</text>
        <text class="original-price" v-if="product.originalPrice">¥{{ product.originalPrice }}</text>
      </view>
      <text class="product-name">{{ product.name }}</text>
      <view class="product-meta">
        <text class="sales">销量: {{ product.productDetail?.sales || 0 }}</text>
        <text v-if="product.isHot" class="hot-tag">热销</text>
      </view>
    </view>

    <!-- 商品描述 -->
    <view class="description-section">
      <text class="section-title">商品描述</text>
      <text class="description">{{ product.productDetail?.description || product.description }}</text>
    </view>

    <!-- 底部操作栏 -->
    <view class="bottom-bar">
      <view class="action-buttons">
        <button class="buy-now-btn" @click="buyNow">立即购买</button>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import http from '@/utils/request'

interface Product {
  id: number;
  name: string;
  price: number;
  originalPrice: number;
  description: string;
  mainImage: string;
  subImages: string[];
  sales: number;
  isHot: number;
  productDetail?: {
    sales: number;
    description: string;
    mainImage: string;
    subImages: string;
  };
}

const product = ref<Product>({
  id: 0,
  name: "",
  price: 0,
  originalPrice: 0,
  description: "",
  mainImage: "",
  subImages: [],
  sales: 0,
  isHot: 0,
  productDetail: {
    sales: 0,
    description: "",
    mainImage: "",
    subImages: ""
  }
});

const productImages = ref<string[]>([]);

// 获取商品详情
const fetchProductDetail = async (id: number) => {
  try {
    const res = await http.get(`/product/api/product/${id}`)
    product.value = res.data
    
    // 处理商品图片，确保subImages存在
    const subImagesString = product.value.productDetail.subImages || ""
    const subImages = subImagesString
      .split(",")
      .filter((item) => item.trim() !== "")
    
    productImages.value = [
      product.value.productDetail.mainImage,
      ...subImages,
    ].filter(Boolean)
  } catch (error) {
    console.error("获取商品详情失败：", error)
  }
};

// 预览图片
const previewImage = (index: number) => {
  uni.previewImage({
    urls: productImages.value,
    current: index,
    indicator: 'default',
    loop: true,
    fail: (err) => {
      console.error('预览图片失败：', err);
    }
  });
};

// 立即购买
const buyNow = () => {
  uni.navigateTo({
    url: "/pages/orders/create",
  });
};

onLoad((options) => {
  if (options.id) {
    fetchProductDetail(Number(options.id));
  }
});
</script>

<style>
.container {
  padding-bottom: 100px;
}

.swiper {
  width: 100%;
  height: 750rpx;
}

.swiper-image {
  width: 100%;
  height: 100%;
}

.product-info {
  padding: 20rpx;
  background-color: #fff;
}

.price-section {
  margin-bottom: 20rpx;
}

.current-price {
  font-size: 40rpx;
  color: #ff4d4f;
  font-weight: bold;
  margin-right: 20rpx;
}

.original-price {
  font-size: 28rpx;
  color: #999;
  text-decoration: line-through;
}

.product-name {
  font-size: 32rpx;
  color: #333;
  margin-bottom: 20rpx;
  line-height: 1.4;
}

.product-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.sales {
  font-size: 24rpx;
  color: #999;
}

.hot-tag {
  display: inline-block;
  padding: 4rpx 12rpx;
  background-color: #fff1f0;
  color: #ff4d4f;
  border: 1px solid #ffccc7;
  border-radius: 8rpx;
  font-size: 24rpx;
}

.description-section {
  margin-top: 20rpx;
  padding: 20rpx;
  background-color: #fff;
}

.section-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 20rpx;
}

.description {
  font-size: 28rpx;
  color: #666;
  line-height: 1.6;
}

.bottom-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #fff;
  padding: 20rpx;
  box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.action-buttons {
  display: flex;
}

.buy-now-btn {
  width: 100%;
  height: 80rpx;
  line-height: 80rpx;
  text-align: center;
  border-radius: 40rpx;
  font-size: 28rpx;
  background-color: #ff4d4f;
  color: #fff;
}
</style>
